<template>
    <div id="News">
        <h2>新闻资讯</h2>
        <!-- <div v-infinite-scroll="load" style="overflow:auto"> -->
        <el-row v-for="item in News" :key="item">
            <el-card>
                <h4>{{ item.title }}</h4>
                <div id="content" v-html="item.content"></div>
                <div class="time">
                    <span>创建时间</span>
                    <span>{{ item.publish_time }}</span>
                </div>
            </el-card>
        </el-row>
        <el-row class="text">
            <div>下拉刷新</div>
        </el-row>

        <!-- </div> -->
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name: "News",
    computed: {
        ...mapState(['News'])
    },
}
</script>

<style lang="scss" scoped>
p {
    text-indent: 2em;
}

.text {
    text-align: center;
}

.updata {
    margin: 0 auto;
}

#News {
    margin-top: 20px;
    visibility: auto;
}

.el-row {
    margin: 20px auto;
    width: 70%;

    .el-card {
        padding: 20px;
        position: relative;
        max-height: 377px;

        #content {
            margin-top: 20px;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 9;
            -webkit-box-orient: vertical;

            ::v-deep p {
                text-indent: 2em;

            }

        }

        .time {
            margin-top: 20px;
            float: right;

            span {
                margin-left: 7px;
                color: rgb(77, 76, 76);
                font-size: 12px;

            }
        }
    }
}
</style>